<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.common.min.js"></script>
  <script src="https://oss.liuyonghu.com/script/echarts-wordcloud.min.js"></script>
</head>

<body style="background-color: aliceblue;">
  <div id="world-cloud" style="height: 1000px;width:1000px;background-color: white;"></div>
</body>
<script>
  window.onload = () => {
    const data = [];
    for (let index = 0; index < 1000; index++) {
      data.push({
        name: `world${index}`,
        value: index * 2
      })
    }
    const chart = echarts.init(document.getElementById('world-cloud'), null, { width: 1000, height: 1000 })
    var maskImage = new Image();

    var option = {
      series: [{
        type: 'wordCloud',
        sizeRange: [10, 50],
        rotationRange: [0, 0],
        gridSize: 0,
        shape: 'pentagon',
        maskImage: maskImage,
        drawOutOfBound: false,
        // layoutAnimation: true,
        left: 'center',
        top: 'center',
        width: '100%',
        height: '100%',
        keepAspect: true,
        textStyle: {
          fontWeight: 'bold',
          color: function () {
            return 'rgb(' + [
              Math.round(Math.random() * 200) + 50,
              Math.round(Math.random() * 50),
              Math.round(Math.random() * 50) + 50
            ].join(',') + ')';
          }
        },
        emphasis: {
          textStyle: {
            color: '#528'
          }
        },
        data: data.sort(function (a, b) {
          return b.value - a.value;
        })
      }]
    };
    // chart.setOption(option);
    maskImage.onload = function () {
      chart.setOption(option);
    }

    maskImage.src = './cloud.png';

    window.onresize = function () {
      chart.resize();
    }
  }
</script>

</html>